<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<% 
	String path = request.getContextPath();
	pageContext.setAttribute("path", path);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		
		<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
		<script type="text/javascript" src="${path }/js/bootstrap.min.js"></script>
		
		
		<link href="${path}/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
		<title>crud</title>
		
		<style type="text/css">
			.text1{
				text-align: center;
			}
			.div1{
				margin:auto auto;
				width:70%;
			}
			.but1{
				float:right;
			}
			
			.div2{
				width:70px;
				float:right;
			}
			
		</style>
		
		<script type="text/javascript">
		   
	
		Date.prototype.toLocaleString = function() {
	          return this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + this.getDate() + " " + this.getHours() + ":" + this.getMinutes() + ":" + this.getSeconds();
	    };

	    function deletePro(id){
			location.href="${path}/deletePro?id="+id;
		}
		
			function showModel(id){
				$('#myModal').modal();
				if(id==null||id==""){
					$("#gridSystemModalLabel").text("添加产品");
					$("#item_id").val("");
					$("#inputName").val("");
					$("#inputPrice").val("");
					$("#inputdetail").text("");
					$("#inputDate").val("");
				}else {
					$.ajax({
						type:"post",
						url:"${path}/alertPro",
						dataType:"json",
						data:"id="+id,
						success:function(msg){
							var unixTimestamp = new Date( msg.createtime) ;
							commonTime = unixTimestamp.toLocaleString();
							$("#item_id").val(msg.id);
							$("#inputName").val(msg.name);
							$("#inputPrice").val(msg.price);
							$("#inputdetail").text(msg.detail);
							$("#inputDate").val(commonTime);
						}
					})
				}
				
				
				
			}
			
		
		</script>
		
	</head>
	
	<body>
		<div class="div1">
			<h2 class="text1">SSM_CRUD</h2>
			<div class="div2"><button  type="button" class="btn btn-success" onclick="showModel()"><span class="glyphicon glyphicon-plus"></span>添加</button></div>
			<table class="table table-hover">
			  <tr>
			  	<td>商品名称</td>
			  	<td>商品价格</td>
			  	<td>商品详情</td>
			  	<td>商品图片</td>
			  	<td>上架时间</td>
			  	<td>操作</td>
			  </tr>
			
			<c:forEach items="${itemList}" var="item">
			  <tr>
			  	<td>${item.name}</td>
			  	<td>${item.price }</td>
			  	<td>${item.detail}</td>
			  	<td><img src="${path }/${item.pic }" height="30px" width="30px"></td>
			  	<td><fmt:formatDate value="${item.createtime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
			  	<td>    
			  		<button type="button" class="btn btn-info" onclick="showModel(${item.id})"><span class="glyphicon glyphicon-pencil"></span>更新</button>
			  		<button type="button" class="btn btn-danger" onclick="deletePro(${item.id})"><span class="glyphicon glyphicon-remove"></span>删除</button>
			  	</td>
			  </tr>
			 </c:forEach>  

			</table>
		</div>
		
		
		<!-- 模态框开始 -->
		
		
		<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
			  <div class="modal-dialog" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title" id="gridSystemModalLabel">更新产品</h4>
			      </div>
			      
			      <form class="form-horizontal"  action="${path }/updatePro"   method="post"  enctype="multipart/form-data">
				      
				      	<input id="item_id"  type="hidden"  name="id"/>
				      
				      <div class="modal-body">
				      				<div class="form-group">
									    <label for="inputEmail3" class="col-sm-2 control-label">商品名称</label>
									    <div class="col-sm-10">
									      <input type="text" class="form-control" name="name" id="inputName" value="aa">
									    </div>
								  </div>
								  
								  <div class="form-group">
								    <label for="inputPassword3" class="col-sm-2 control-label">商品价格</label>
								    <div class="col-sm-10">
								      <input type="text" class="form-control" id="inputPrice" value="3000"  name="price"  >
								    </div>
								  </div>

								  
								  <div class="form-group">
								    <label for="inputPassword4" class="col-sm-2 control-label">上架时间</label>
								    <div class="col-sm-10">
								      <input type="text" class="form-control" name="createtime"  id="inputDate"  value="2019-03-20 12:12:12">
								    </div>
								  </div>
								  
								  <div class="form-group">
								    <label class="col-sm-2 control-label">商品图片</label>
								    <div class="col-sm-10">
								      <input type="file" name="pictureFile">
								    </div>
								  </div>
								  
								  
								   <div class="form-group">
								    <label  class="col-sm-2 control-label">产品详情</label>
								    <div class="col-sm-10">
								      <textarea name="detail"  id="inputdetail"  rows="4" cols="20">性价比高！</textarea>
								    </div>
								  </div>

				      </div>
				      
				      <div class="modal-footer">
				        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				        <button type="submit" class="btn btn-primary">保存</button>
				      </div>
			      </form>
			    </div>
			  </div>
			</div>
		<!-- 模态框结束 -->
		
		
	</body>
</html>